<template>
	<view class="content">
		<text style="display:block;padding: 16upx 30upx 10upx;lihe-height: 1.6;color: #fa436a;font-size: 24upx;">选择你的收货地址，校园大使会将包裹送至此地址。</text>
		<!-- 地址 -->
		<navigator url="/pages/address/address?source=1" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{ addressData.name }}</text>
						<text class="mobile">{{ addressData.phone }}</text>
					</view>
					<text class="address">{{ addressData.school }} {{ addressData.dom }}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<image
				class="a-bg"
				src=""
			></image>
		</navigator>

		<view class="row b-b">
			<text class="tit">佣金</text>
			<input class="input" type="digit" v-model="address.price" placeholder="一公斤以内1.5元,1-2公斤2.5元,2-4公斤4元,其他自定" placeholder-class="placeholder text-sm" />
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			<input class="input" v-model="address.from" placeholder="简要描述取件地址" placeholder-class="placeholder text-sm" />
		</view>
		<view class="cu-bar bg-white"><view class="action">身份认证</view></view>
		<view class="cu-form-group">
			<view class="grid col-4 grid-square flex-sub">
				<view
					class="padding-xs bg-img"
					:style="[{backgroundImage:'url(' + host+'/'+imgList[index] +')'}]" 
					v-for="(item, index) in imgList"
					:key="index"
					@tap="ViewImage"
					:data-url="host+'/'+imgList[index]"
				>
				<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index"><text class="cuIcon-close"></text></view>
				</view>
				<view class="padding-xs solids" @tap="ChooseImage" v-if="imgList.length == 0"><text class="cuIcon-cameraadd"></text></view>
				<text class="text-sm placeholder" v-if="imgList.length == 0">请提交一卡通信息</text>
			</view>
		</view>		
		<view class="cu-bar bg-white"><view class="action">快递短信</view></view>
		<view class="cu-form-group"><textarea maxlength="-1" v-model="address.msg" :placeholder="msg" placeholder-class="placeholder text-sm"></textarea></view>
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			host:'',
			address: {
				price: '',
				from:'',
				msg: ''
			},
			addressData: {
				name: '点击选择收货地址',
				phone: '',
				school: '',
				dom: '',
			},
			msg: '请将快递短信粘贴在这里^_^',
			imgList: []
		};
	},
	onLoad(option) { this.host = this.$host },
	methods: {
		ChooseImage() {
			if (this.imgList.length === 1) {
				uni.showToast({
					title: '只能添加一张图片',
					icon: 'none'
				});
			} else {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						uni.uploadFile({
							url: `${this.host}/upload`,
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: { },
							success: (file) => {
								let data = JSON.parse(file.data)
								console.log(data)
								// let img = `${this.$host}/${data.info}`;
								if(data.status === 1){
									this.imgList.push(data.info)
								}else this.$api.msg('照片上传错误');								
							}
						});		
					}
				});
			}
		},
		ViewImage(e) {
			let arr = []
			for (let img in this.imgList) { arr.push(`${this.host}/${this.imgList[img]}`) }
			uni.previewImage({
				urls: arr,
				current: e.currentTarget.dataset.url
			});
		},
		DelImg(e) {
			uni.showModal({
				title: '确认删除',
				content: '确定要删除这张照片么？',
				cancelText: '取消',
				confirmText: '确定',
				success: res => {
					if (res.confirm) {
						this.imgList.splice(e.currentTarget.dataset.index, 1);
					}
				}
			});
		},
		//提交
		confirm() {
			const {price ,from, msg} = this.address;
			if (this.addressData.name == '点击选择收货地址') { this.$api.msg('请选择收货位置'); return; }
			if (!price || price < 1.5) { this.$api.msg('请填写正确佣金'); return; }
			if (!from) { this.$api.msg('请填写正确取件地址'); return; }
			if (this.imgList.length < 1) { this.$api.msg('请上传一卡通身份信息'); return; }
			if (!msg) { this.$api.msg('请填写取件信息'); return; }
			
			console.log(price ,from, msg, this.imgList, this.addressData)
			// 封装传递数据 类别*（-4、账户充值，-3、开卡，-2、代发，-1、代取，0.考试，1.旅游，2.水果）
			let obj = JSON.stringify({ from: from, location_id: this.addressData.id, total:1, money:price, img:this.imgList[0], key:msg, type:-1})
			// 提交支付信息
			// 支付类别 0、资金充值、1、发布代取快递，2、快递代发、3、考试下单、旅游下单，水果下单
			uni.navigateTo({ url: `../money/pay?kind=0&type=1&order=${obj}` });
		}
	}
};
</script>

<style lang="scss">
/* 分类 */
.cate-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 30upx 22upx;
	background: #fff;
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
	}
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 80upx;
		height: 80upx;
		margin-bottom: 14upx;
		border-radius: 50%;
		opacity: 1;
		box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.1);
	}
}
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.address-section {
	padding: 30upx 0;
	background: #fff;
	position: relative;

	.order-content {
		display: flex;
		align-items: center;
	}

	.icon-shouhuodizhi {
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 90upx;
		color: #888;
		font-size: 44upx;
	}

	.cen {
		display: flex;
		flex-direction: column;
		flex: 1;
		font-size: 28upx;
		color: $font-color-dark;
	}

	.name {
		font-size: 34upx;
		margin-right: 24upx;
	}

	.address {
		margin-top: 16upx;
		margin-right: 20upx;
		color: $font-color-light;
	}

	.icon-you {
		font-size: 32upx;
		color: $font-color-light;
		margin-right: 30upx;
	}

	.a-bg {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 5upx;
	}
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
